<template>
    <a-form style="width: 500px;" ref='formRef' :label-col='{span : 5}' :model='formData'>
        <template v-if="fields">
            <template v-for="(item, key) in fields">
                <a-form-item :label='item.name' :name='key'>
                    <template v-if="item.dataType == 'text'">
                        <a-textarea v-model:value='formData[key]' :rows="1" />
                    </template>
                    <template v-if="item.dataType == 'number'">
                        <a-input-number v-model:value='formData[key]' />
                    </template>
                </a-form-item>
            </template>
        </template>

        <a-form-item :wrapper-col="{offset : 5}"><a-button :loading="loading" style="width: 100%" type="primary" @click="submit">保存</a-button></a-form-item>
    </a-form>
</template>

<script lang="ts" setup>
    import { updateItemApi } from '@/api/system/Config'

import { message, Modal } from 'ant-design-vue';
        import { ref } from 'vue';


    const props = defineProps<{
        id:number;
        config? : any;
    }>()


    const formRef = ref()


    const fields = ref<any>()
    
    const formData = ref<any>({
    })

    formData.value.id = props.id

    if(props.config) {
        for(let k in props.config) {
            formData.value[k] = props.config[k].value
        }

        fields.value = props.config
        

    }

    const loading = ref(false)

    async function submit() {
        let params  = await formRef.value.validate()
        loading.value = true
        const res = await updateItemApi(props.id, params)
        loading.value = false
        if(res.success) {
            message.success('保存成功')
        }else {
            Modal.error({
                title : res.msg
            })
        }
    }



    defineExpose({
        submit
    })
</script>